<template>
	<div class="address-list" @click="onSelectAddress">
    <div class="item">
      <icon :type="handleIconSly.icon" size="2" :style="{'color': handleIconSly.color}"/>
      <div class="title__cont">
        <div class="from">
          <span class="tag" :style="{'background': handleIconSly.color}">{{ handleIconSly.title }}</span>
          {{ address }}
        </div>
        <div class="to" v-if="handleAddressDetails.length === 1">
          <small>{{ addressDetails }}</small>
        </div>
      </div>
    </div>
    <div class="exit" v-if="handleAddressDetails.length !== 1">
      <div class="exit-item"
           v-for="item in handleAddressDetails"
           @click.stop="onSelectAddressDetail(item)" :key="item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        timer: null
      }
    },
    props: {
      addressData: {
        type: Object,
        default: function () {
          return {}
        }
      },
      address: '',
      addressDetails: ''
    },
    computed: {
      handleAddressDetails () {
        if (this.addressDetails === '[]') {
          return []
        } else {
          return this.addressDetails.split(';')
        }
      },
      handleIconSly () {
        let sly = {};
        if (this.addressData.current) {
          sly.title = '当前';
          sly.icon = 'icon-dingwei';
          sly.color = '#46a1bb';
        } else {
          sly.title = '常用';
          sly.icon = 'icon-shijian2';
          sly.color = '#999';
        }
        return sly
      }
    },
    methods: {
      onSelectAddress () {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          let addressDetails = this.addressDetails.split(';')
          this.$emit('selected',  Object.assign(this.addressData, {
            addressDetail: `${this.addressDetails.length === 1 ? this.addressDetails[0] : this.address}`
          }))
        }, 200)
      },
      onSelectAddressDetail (item) {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.$emit('selected', Object.assign(this.addressData, {
            addressDetail: `${item}`
          }))
        }, 200);
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"
  .address-list
    align-items center
    padding 1 * .61rem
    background #fff
    border-bottom 1px #ddd solid
    >span
      display block
    .item
      width 100%
      line-height 2 * .61rem
      display flex
      align-items center
      .icon
        width 2 * .61rem
        color: #46a1bb
        text-align center
      .title__cont
        margin-left 5px
        .from
          font-size $sl_font_size_14
          line-height 2 * .61rem
          color $sl_font_color_default
          .tag
            background #46a1bb
            padding .2 * .61rem
            border-radius 2px
            font-size 0.41rem
            color: #fff
        .to
          color $sl_font_color_desc
          small
            font-size $sl_font_size_small
    .exit
      display flex
      padding-left 2 * .61rem
      flex-wrap wrap
      .exit-item
        width 25%
        margin-right 1.5 * .61rem
        margin-top 1 * .61rem
        padding 1 * .61rem .5 * .61rem
        box-sizing border-box
        border 1px solid #ddd
        border-radius 4px
        text-align center
        font-size $sl_font_size_14
        overflow hidden
        text-overflow ellipsis
        -webkit-line-clamp 1
        white-space nowrap
</style>
